<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="order by dede58.com"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="img/logo.png"/>
    <title>业财税一体化平台</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/mmss.css"/>
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>

    <![endif]-->
    <style>

    </style>
</head>
<body>
<div id="app">
    <header>
        <div class="container-fluid navbar-fixed-top bg-primary">
            <ul class="nav navbar-nav  left">
                <li class="text-white h4">
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-leaf"></span>&nbsp;&nbsp;<b>业财税一体化平台</b>
                </li>
            </ul>
            <ul class="nav navbar-nav nav-pills right ">
                <li class="bg-info dropdown">
                    <a class="dropdown-toggle" href="#" data-toggle="dropdown">
                        <span class="glyphicon glyphicon-user"></span>&nbsp;<span>{{token.userName}}</span><span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right">
                        <li class="text-center"><a v-on:click="logout()"><span class="text-primary">退出</span></a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </header>

    <section>
        <div class="container-fluid">
            <div class="row ">
                <!--左侧导航开始-->
                <div class="col-xs-2 bg-blue">
                    <br/>
                    <div class="panel-group sidebar-menu" id="accordion" aria-multiselectable="true">
                        <div class="panel panel-default menu-first menu-first-active">
                            <a data-toggle="collapse" data-parent="#accordion" href="index.html" aria-expanded="true"
                               aria-controls="collapseOne">
                                <i class="icon-home icon-large"></i> 主页
                            </a>
                        </div>
                        <div class="panel panel-default menu-first">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true"
                               aria-controls="collapseOne">
                                <i class="icon-user-md icon-large"></i> 系统管理</a>
                            </a>

                            <div id="collapseOne" class="panel-collapse collapse " >
                                <ul class="nav nav-list menu-second">
                                    <li v-if="token.role == 'admin'"><a href="user_manage.html"><i class="icon-user"></i> 用户管理</a></li>
                                    <li v-if="token.role == 'admin'"><a href="admin_manage.html"><i class="icon-user"></i> 管理员管理</a></li>
                                    <li v-if="token.role == 'user'"><a href="business_line_manage.html"><i class="icon-list"></i> 业务线管理</a></li>
                                    <li v-if="token.role == 'user'"><a href="tax_rate_manage.html"><i class="icon-list"></i> 区域税率管理</a></li>
                                    <li v-if="token.role == 'user'"><a href="company_account_manage.html"><i class="icon-list"></i> 公司账户管理</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="panel panel-default menu-first" v-if="token.role == 'user'">
                            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
                               aria-expanded="false" aria-controls="collapseTwo">
                                <i class="icon-book icon-large"></i> 账务管理</a>
                            </a>
                            <div id="collapseTwo" class="panel-collapse collapse">
                                <ul class="nav nav-list menu-second">
                                    <li><a href="contract_manage.html"><i class="icon-list"></i> 合同管理</a></li>
                                    <li><a href="invoice_manage.html"><i class="icon-list"></i> 发票管理</a></li>
                                    <li><a href="receivable_accrued_manage.html"><i class="icon-list"></i> 应收计提</a></li>
                                    <li><a href="receivable_bill_manage.html"><i class="icon-list"></i> 应收账单</a></li>
                                    <li><a href="payable_accrued_manage.html"><i class="icon-list"></i> 应付计提</a></li>
                                    <li><a href="payable_bill_manage.html"><i class="icon-list"></i> 应付账单</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!--左侧导航结束-->
                <!----------------------------------------------------------------------------------------------------->
                <!--右侧内容开始-->
                <div class="col-xs-10">
                    <br/>
                    <ol class="breadcrumb">
                        <li class="active">财务管理 - 发票管理 - 发票详情</li>
                    </ol>

                    <div class="input-group line left">
                        <span class="input-group-addon">发票内容</span></span>
                        <input v-model="invoice.invoiceContext" type="text" id="invoiceContext" class="form-control" placeholder="合同名称" aria-describedby="basic-addon2" disabled>
                    </div>

                    <div class="input-group line left">
                        <span class="input-group-addon">合同ID</span>
                        <select v-model="contract.id" @change="selectContract($event)" class="form-control" aria-describedby="basic-addon2">
                            <option v-for="item in contractList" :value="item.id">
                                <span>{{item.id}}</span>
                            </option>
                        </select>
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon">合同名称</span>
                        <select v-model="contract.id" class="form-control" aria-describedby="basic-addon2">
                            <option v-for="item in contractList" :value="item.id">
                                <span>{{item.contractName}}</span>
                            </option>
                        </select>
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon">发票阶段</span>
                        <select v-model="invoice.invoiceOperationStageValue" class="form-control">
                            <option value="0"><span>无</span></option>
                            <option value="1"><span>待编辑</span></option>
                            <option value="2"><span>待审核</span></option>
                            <option value="3"><span>已审核</span></option>
                            <option value="4"><span>已开票</span></option>
                            <option value="5"><span>已作废</span></option>
                        </select>
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon">合同状态</span>
                        <select v-model="invoice.enableStatusValue" class="form-control">
                            <option value="0"><span>无</span></option>
                            <option value="1"><span>正常</span></option>
                            <option value="2"><span>弃用</span></option>
                        </select>
                    </div>
                    <br>
                    <br/>
                    <div class="input-group line left">
                        <span class="input-group-addon">发票类型</span>
                        <select v-model="invoice.invoiceTypeValue" class="form-control">
                            <option value="0"><span>无</span></option>
                            <option value="1"><span>增值税专用发票</span></option>
                            <option value="2"><span>增值税普通发票</span></option>
                        </select>
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon">发票颜色</span>
                        <select v-model="invoice.invoiceColorValue" class="form-control">
                            <option value="0"><span>无</span></option>
                            <option value="1"><span>红票</span></option>
                            <option value="2"><span>蓝票</span></option>
                        </select>
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon" >发票代码</span>
                        <input v-model="invoice.invoiceDetail.invoiceCode" type="text" class="form-control" placeholder="发票代码" aria-describedby="basic-addon2">
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon" >发票号码</span>
                        <input v-model="invoice.invoiceDetail.invoiceNumber" type="text" class="form-control" placeholder="发票号码" aria-describedby="basic-addon2">
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon">开票日期</span>
                        <input v-model="invoice.invoiceDetail.date" type="text" class="form-control" placeholder="yyyy-mm-dd" aria-describedby="basic-addon2">
                    </div>
                    <br>
                    <br/>
                    <div class="input-group line left">
                        <span class="input-group-addon">备注</span>
                        <input v-model="invoice.note" type="text" class="form-control" placeholder="备注" aria-describedby="basic-addon2">
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon">规格型号</span>
                        <input v-model="invoice.invoiceDetail.specificationModel" type="text" class="form-control" placeholder="规格型号" aria-describedby="basic-addon2">
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon">单位</span>
                        <input v-model="invoice.invoiceDetail.unit" type="text" class="form-control" placeholder="单位" aria-describedby="basic-addon2">
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon">数量</span>
                        <input v-model="invoice.invoiceDetail.quantity" type="text" class="form-control" placeholder="数量" aria-describedby="basic-addon2">
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon">单价</span>
                        <input v-model="invoice.invoiceDetail.unitPrice" type="text" class="form-control" placeholder="单价" aria-describedby="basic-addon2">
                    </div>
                    <br>
                    <br/>
                    <div class="input-group line left">
                        <span class="input-group-addon">金额</span>
                        <input v-model="invoice.invoiceDetail.totalMoney" type="text" class="form-control" placeholder="金额" aria-describedby="basic-addon2">
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon" >税率</span>
                        <select v-model="taxRate.id" @change="selectTaxRate($event)" class="form-control" aria-describedby="basic-addon2">
                            <option v-for="item in taxRateList" :value="item.id">
                                <span>{{item.rate}}-{{item.taxRegion}}-{{item.taxType}}</span>
                            </option>
                        </select>
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon" >税额</span>
                        <input v-model="invoice.invoiceDetail.taxMoney" disabled type="number" class="form-control" placeholder="税额" aria-describedby="basic-addon2">
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon" >价税合计</span>
                        <input v-model="invoice.invoiceDetail.totalTaxMoney" disabled type="text" class="form-control" placeholder="价税合计" aria-describedby="basic-addon2">
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon" >币种</span>
                        <input v-model="invoice.invoiceDetail.currencyDicCode" type="text" class="form-control" placeholder="币种" aria-describedby="basic-addon2">
                    </div>
                    <br>
                    <br/>

                    <!--                    <a v-on:click="select()" class=" btn btn-primary "><span class="glyphicon glyphicon-search"></span></a>-->
                    <!----------------------------------------------------------    ------------------------------------------->
                </div>

                <div class="col-xs-10">
                    <br/>
                    <ol class="breadcrumb">
                        <li class="active">财务管理 - 发票管理 - 发票详情 - 销方信息</li>
                    </ol>

                    <div class="input-group line left">
                        <span class="input-group-addon">销方公司</span>
                        <select v-model="sellCompanyAccount.id" @change="selectSellCompanyAccount($event)" class="form-control">
                            <option v-for="item in companyAccountList" :value="item.id"><span >{{item.companyName}}</span></option>
                        </select>
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon" >纳税人识别号</span>
                        <input v-model="sellCompanyAccount.invoiceTaxNumber" type="text" id="invoiceTaxNumber" class="form-control" placeholder="纳税人识别号" aria-describedby="basic-addon2" disabled>
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon" >开票地址</span>
                        <input v-model="sellCompanyAccount.invoiceAddress" type="text" id="invoiceAddress" class="form-control" placeholder="开票地址" aria-describedby="basic-addon2" disabled>
                    </div>
                    <br>
                    <br/>
                    <div class="input-group line left">
                        <span class="input-group-addon" >开票电话</span>
                        <input v-model="sellCompanyAccount.invoicePhone" type="text" id="invoicePhone" class="form-control" placeholder="开票电话" aria-describedby="basic-addon2" disabled>
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon" >开户行名称</span>
                        <input v-model="sellCompanyAccount.invoiceDepositBank" type="text" class="form-control" placeholder="开户行名称" aria-describedby="basic-addon2" disabled>
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon" >开票银行账号</span>
                        <input v-model="sellCompanyAccount.invoiceBankAccount" type="text"  class="form-control" placeholder="开票银行账号" aria-describedby="basic-addon2" disabled>
                    </div>
                </div>

                <div class="col-xs-10">
                    <br/>
                    <ol class="breadcrumb">
                        <li class="active">财务管理 - 发票管理 - 发票详情 - 购方信息</li>
                    </ol>

                    <div class="input-group line left">
                        <span class="input-group-addon">销方公司</span>
                        <select v-model="buyCompanyAccount.id" @change="selectBuyCompanyAccount($event)" class="form-control">
                            <option v-for="item in companyAccountList" :value="item.id"><span >{{item.companyName}}</span></option>
                        </select>
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon" >纳税人识别号</span>
                        <input v-model="buyCompanyAccount.invoiceTaxNumber" type="text" class="form-control" placeholder="纳税人识别号" aria-describedby="basic-addon2" disabled>
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon" >开票地址</span>
                        <input v-model="buyCompanyAccount.invoiceAddress" type="text"  class="form-control" placeholder="开票地址" aria-describedby="basic-addon2" disabled>
                    </div>
                    <br>
                    <br/>
                    <div class="input-group line left">
                        <span class="input-group-addon" >开票电话</span>
                        <input v-model="buyCompanyAccount.invoicePhone" type="text" class="form-control" placeholder="开票电话" aria-describedby="basic-addon2" disabled>
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon" >开户行名称</span>
                        <input v-model="buyCompanyAccount.invoiceDepositBank" type="text" class="form-control" placeholder="开户行名称" aria-describedby="basic-addon2" disabled>
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon" >开票银行账号</span>
                        <input v-model="buyCompanyAccount.invoiceBankAccount" type="text" class="form-control" placeholder="开票银行账号" aria-describedby="basic-addon2" disabled>
                    </div>
                    <a v-on:click="goBack()" class="btn btn-primary ">返回</a>
                    <a v-on:click="save()" class="btn btn-primary ">保存</a>
                </div>
            </div>
                <!--右侧内容结束-->
        </div>
    </section>
</div>
</body>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/vue.dev.js"></script>
<script>
    var v = new Vue({
        el: "#app",
        data:{
            token:{
                userId:1,
                role:"user",
                userName:"guoyuhang"
            },
            invoice: {
            },
            contractList:[
            ],
            taxRateList:[
            ],
            companyAccountList:[
            ],
            contract:{},
            sellCompanyAccount:{},
            buyCompanyAccount:{},
            taxRate:{}
        },
        created: function (){
            var self = this;
            this.token = JSON.parse(localStorage.getItem("token"));
            if (this.token == null){
                alert("未登录");
                window.location.href='login.html';
            }
            this.invoice = JSON.parse(localStorage.getItem("invoice"));
            $.ajax({
                url: "http://localhost:8080/contract/contract/get/list/contract",
                type: "POST",
                dataType: "json",
                async: false,
                data: {
                    "contractDirectionValue": 0
                },
                success: function (data){
                    self.contractList = data.result;
                },
                error: function (){
                    alert("系统出错");
                    window.location.href="invoice_manage.html";
                }
            });
            $.ajax({
                url: "http://localhost:8084/system/tax/rate/get/list/tax/rate",
                type: "POST",
                dataType: "json",
                async: false,
                success: function (data){
                    self.taxRateList = data.result;
                },
                error: function (){
                    alert("系统出错");
                    window.location.href="invoice_manage.html";
                }
            });
            $.ajax({
                url: "http://localhost:8084/system/company/account/get/list/company/account",
                type: "POST",
                dataType: "json",
                async: false,
                success: function (data){
                    self.companyAccountList = data.result;
                },
                error: function (){
                    alert("系统出错");
                    window.location.href="invoice_manage.html";
                }
            });
            var contractId = this.invoice.contractId;
            this.contract = JSON.parse(JSON.stringify(this.contractList.filter(function (value,index,arr){
                return value.id == contractId;
            })[0]));
            var taxRateId = this.invoice.invoiceDetail.taxRateId;
            this.taxRate = JSON.parse(JSON.stringify(this.taxRateList.filter(function (value,index,arr){
                return value.id == taxRateId;
            })[0]));
            var sellAccountId = this.invoice.invoiceDetail.sellAccountId;
            this.sellCompanyAccount = JSON.parse(JSON.stringify(this.companyAccountList.filter(function (value,index,arr){
                return value.id == sellAccountId;
            })[0]));
            var buyAccountId = this.invoice.invoiceDetail.buyAccountId;
            this.buyCompanyAccount = JSON.parse(JSON.stringify(this.companyAccountList.filter(function (value,index,arr){
                return value.id == buyAccountId;
            })[0]));
        },
        methods: {
            selectTaxRate: function (event){
                var id = event.target.value;
                var taxRate = this.taxRateList.filter(function (value,index,arr){
                    return value.id == id;
                });
                this.taxRate = JSON.parse(JSON.stringify(taxRate[0]));
            },
            selectSellCompanyAccount: function (event){
                var id = event.target.value;
                var companyAccount = this.companyAccountList.filter(function (value,index,arr) {
                    return value.id == id;
                });
                this.sellCompanyAccount = JSON.parse(JSON.stringify(companyAccount[0]));
            },
            selectBuyCompanyAccount: function (event){
                var id = event.target.value;
                var companyAccount = this.companyAccountList.filter(function (value,index,arr) {
                    return value.id == id;
                });
                this.buyCompanyAccount = JSON.parse(JSON.stringify(companyAccount[0]));
            },
            save: function (){
                this.invoice.businessLineId = this.contract.businessLineId;
                this.invoice.contractId = this.contract.id;
                this.invoice.invoiceDetail.taxRateId = this.taxRate.id;
                this.invoice.invoiceDetail.sellAccountId = this.sellCompanyAccount.id;
                this.invoice.invoiceDetail.buyAccountId = this.buyCompanyAccount.id;
                $.ajax({
                    url: "http://localhost:8081/invoice/invoice/compile/one/invoice",
                    contentType: "application/json",
                    type: "POST",
                    dataType: "json",
                    data: JSON.stringify(this.invoice),
                    success: function (data){
                        alert(data.result);
                        window.location.href="invoice_manage.html";
                    },
                    error: function (data){
                        alert("系统错误");
                    }
                });
            },
            logout: function (){
                localStorage.clear();
                window.location.href='login.html';
            },
            goBack: function (){
                window.location.href='invoice_manage.html';
            }
        }
    });
</script>
</html>